<template>
  <div class="header-with-back">
    <div class="back-nav" @click="goToIndex">
      <van-icon name="arrow-left" />
      <span style="font-size: 1.2rem">设置</span>
    </div>
  </div>
  <div class="user-info-container">
  <div class="fw"/>
    <van-cell is-link title="切换账号" @click="goToEnterUser" class="function-item"/>
    <van-cell is-link title="修改密码" @click="goToPassword" class="function-item"/>
    <van-cell is-link title="退出登录" @click="logout" class="function-item"/>
  </div>
</template>

<script setup lang="ts" name="UserInfoSetting">
import router from "../../../Router";
import { useUserStore } from '../../../Store/modules/userinfo/UserInfo.js'
import {userLogoutUsingPost} from "../../../Api/yonghumokuai";
const userStore = useUserStore();
// 返回到个人中心
function goToIndex() {
  router.push('/cqust/userinfo');
}

// 切换账号
const goToEnterUser = () => {
  userLogoutUsingPost();
  localStorage.clear();
  router.push('/')
}

// 密码修改
const goToPassword = () => {
  router.push('/MMXGView')
}

// 退出登录
const logout = () => {
  userStore.clearUser();
  userLogoutUsingPost();
  localStorage.clear();
  router.push('/');
}

</script>

<style scoped>
/*返回*/
.back-nav {
  position: fixed;
  left: 1%;
  top: 1.25%;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: rgb(83, 30, 88);
  padding: 0.5rem;
  z-index: 10;
  font-size: 0.9rem;
}
/*返回符号*/
.header-with-back .van-icon {
  position: static;
  font-size: 1.35rem;
}

/* 基础布局设置 */
.user-info-container {
  padding: 20px;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: white;
}

.fw {
  height: 7%;
}

/* 功能项列表 */
.function-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px;
  border: 1px solid #e8d5e3;
  font-size: 16px;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.function-item:hover {
  background-color: rgba(124, 68, 109, 0.05);
  transform: translateX(3px);
}

.function-item span {
  color: #333;
  font-weight: 500;
}

.el-icon-arrow-right {
  color: rgb(158, 98, 138);
  font-weight: bold;
}
</style>
